<style scoped lang="scss">
.demo {
    padding: 10px;
    margin: 15px 0;
    border-bottom: 1px solid #f2f2f2;
    height: 130px;

    // background-color: pink;
    dl {
        display: flex;

        // align-items: center;
        dd {
            flex: 1;
            padding: 2px;

            .ps {
                width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}

.box {
    width: 100vw;
    height: 570px;
    // background-color: pink;
    position: relative;
    overflow-y: scroll;

    .content {
        position: absolute;
        width: 100vw;
        top: 0;
        left: 0;
        // overflow-y: scroll;
    }
}
</style>

<template>
    <div>
        <van-search v-model="values" show-action placeholder="搜索您想了解的内容" @search="onSearch">
            <template #action>
                <div
                    style=" width: 50px; text-align: center; border-radius: 30px;background-color: rgb(43, 135, 255);color: #fff; ">
                    搜索</div>
            </template>
        </van-search>
        <van-tabs v-model:active="active">

            <van-tab title="语音">
                <div class="box" @scroll="scroll">
                    <div class="plant" :style="{ height: configs.totalHeight + 'px' }"></div>
                    <div class="content" :style="{ transform: `translateY(${scrollTopRef}px)`}"> 
                            <div v-for="(v, i) in renderData" :key="i" class="demo" @click="goDetail(v)" :style="{height:itemHeight+'px'}">
                                <dl>
                                    <dt> <img :src="v.textimage" style="width: 160px;height: 100px;" alt=""> </dt>
                                    <dd>
                                        <p style="font-size: 16px;" class="ps"> 
                                            <span style="background-color: rgb(248, 236, 198);color: orange;font-size: 12px;padding: 3px;border-radius: 3px;">
                                                {{ v.texttype }} 
                                            </span> 
                                                {{ v.texttitle }} 
                                        </p>
                                        <p style="font-size: 13px;line-height: 28px;margin-top: 5px;"><van-text-ellipsis
                                                rows="2" :content="v.textdescword" /></p>
                                    </dd>
                                </dl>
                                <p> {{ v.textcount }} 收听 </p>
                            </div>
                    </div>
                </div>
            </van-tab>


            <van-tab title="问答">
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <template v-for="(v, i) in searchList" :key="i">
                        <div v-if="v.texttype === '问答'" class="demo" @click="goDetail2(v)">
                            <dl>
                                <dd>
                                    <p style="font-size: 16px; width: 100%;"> <span
                                            style="background-color: skyblue;color: #fff;font-size: 12px;padding: 3px;border-radius: 3px;">
                                            {{ v.texttype }} </span> {{ v.texttitle }} </p>
                                    <p style="font-size: 13px;line-height: 28px;margin-top: 5px;"><van-text-ellipsis
                                            rows="2" :content="v.textdescword" /></p>
                                </dd>
                            </dl>
                            <p> {{ v.textcount }} 阅读 </p>
                        </div>
                    </template>
                </van-list>
            </van-tab>


            <van-tab title="实录">
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <template v-for="(v, i) in searchList" :key="i">
                        <div v-if="v.texttype === '文章'" class="demo" @click="goDetail3(v)">
                            <dl>
                                <dd>
                                    <p style="font-size: 16px; width: 100%;"> <span
                                            style="background-color:pink ;color: red;font-size: 12px;padding: 3px;border-radius: 3px;">
                                            实录 </span> {{ v.texttitle }} </p>
                                    <p style="font-size: 13px;line-height: 28px;margin-top: 5px;"><van-text-ellipsis
                                            rows="2" :content="v.textdescword" /></p>
                                </dd>
                            </dl>
                            <p> {{ v.textcount }} 阅读 </p>
                        </div>
                    </template>
                </van-list>
            </van-tab>

        </van-tabs>

    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import type { ListItemState } from '../../interView/indexView'
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const values = ref('')
const active = ref(0);
const searchList = ref<ListItemState[]>([])
const loading = ref(true)
const finished = ref(false)
const config = reactive({
    pageCode: 1,
    pageSize: 50
})

// 触底加载更多
const onLoad = () => {
    config.pageCode++
    loading.value = true
    getSearchList()
}
const getSearchList = async () => {
    const res = await axios.get('/api/book/list', { params: { pageCode: config.pageCode, pageSize: config.pageSize } })
    console.log(res);
    searchList.value = [...searchList.value, ...res.data.data]
    loading.value = false;
    // console.log(searchList.value);
}

// 模糊搜索列表
const onSearch = () => {
    console.log(values.value);
    axios.get('/api/book/list', { params: { pageCode: config.pageCode, pageSize: config.pageSize, search: values.value } }).then(res => {
        console.log(res);
        searchList.value = res.data.data
    })
}

const configs = reactive({
    startIndex: 0,
    endIndex: 0,
    totalHeight: 0
})

// 页面可视化内容的高度
const clientHeight= document.documentElement.clientHeight;
// 每一条内容的高度
const itemHeight = 130;
const clientItemCount = Math.ceil(clientHeight / itemHeight)

const renderData = computed(() => {
    return searchList.value.slice(configs.startIndex, configs.endIndex)
})

const scrollTopRef = ref(0)
const scroll = (e: any) => {
    const scrollTop = e.target.scrollTop
    configs.startIndex = Math.floor(scrollTop / itemHeight)
    configs.endIndex = configs.startIndex + clientItemCount
    scrollTopRef.value = configs.startIndex * itemHeight
    // config.totalHeight=searchList.length*itemHeight
}

onMounted(() => {
    configs.totalHeight = searchList.value.length * itemHeight
    configs.endIndex = configs.startIndex + clientItemCount
})


const goDetail = (v: ListItemState) => {
    router.push({
        path: `/detail/${v.textid}`
    })
}

const goDetail2 = (v: ListItemState) => {
    router.push({
        path: `/detail2/${v.textid}`
    })
}

const goDetail3 = (v: ListItemState) => {
    router.push({
        path: `/detail3/${v.textid}`
    })
}


getSearchList()
</script>